<script setup>
import hpop from '@/components/hpop.vue';
import { ref, onMounted, watch, onBeforeUnmount } from 'vue';
import { isEmpty, isFunction } from '@/plugins/util';

const props = defineProps({
    title: {
        type: String,
        default: '温馨提示'
    },
    content: {
        type: String,
        default: ''
    },
    btn: {
        type: Object,
        default: {
            confirm: '确认',
            cancel: '取消'
        }
    },
    styleSet: {
        type: Object,
        default: { maxWidth: '500px' }
        // default: function () {
        //     return {};
        // }
    },
    confirmCallback: {
        type: Function
    },
    cancelCallback: {
        type: Function
    },
    // popShow: {
    //     type: Boolean,
    //     default: false
    // },
    // containerEle: {
    //     required: true
    // }
});


const popShow = ref(false);

defineExpose({
    popShow,
});

// defineEmits(['update:popShow'])


onMounted(() => {
    // 元素渲染完毕
    popShow.value = true;
})

// watch(popShow, () => {
//     emit('update:popShow', popShow)
//     // console.log(popShow.value)
//     // if (!popShow.value) {
//     //     setTimeout(() => {
//     //         containerEle.remove();
//     //     }, 2000);
//     // }
// })

// onBeforeUnmount(() => {
//     // console.log('onBeforeUnmount')
//     // popShow.value = false
// })


// watch(
//     () => popShow,
//     () => {
//         if (!popShow.value) {
//             setTimeout(() => {
//                 props.containerEle.remove();
//             }, 2000);
//         }
//     },
//     {
//         deep: true
//     }
// );

// const cancelClick = () => {
//     // if (isFunction(props.cancelCallback())) {
//     //     props.cancelCallback(container);
//     // }
//     popShow.value = false;
// }


// const confirmClick = () => {
//     // 如果是方法，则执行方法，并获取执行的值 如果返回值没有，或者返回值为true 也关闭确认弹窗
//     if (isFunction(props.confirmCallback)) {
//         const confirmCallbackRes = props.confirmCallback();
//         if (confirmCallbackRes == undefined || confirmCallbackRes == true) {
//             popShow.value = false;
//         }
//     } else {
//         popShow.value = false;
//     }
// }


</script>

<template>
    <!-- 依赖 hpop -->
    <hpop :show="popShow" @close="cancelCallback" :style-set="styleSet">
        <template #header>
            <div v-html="title"></div>
        </template>
        <template #main>
            <div v-html="content"></div>
        </template>
        <template #footer>
            <div class="h-12 w-full flex justify-end items-center pr-2 space-x-4">
                <button type="button" v-if="btn.cancel" @click="cancelCallback" class="btn btn-secondary">
                    {{ btn.cancel }}
                </button>
                <button type="button" v-if="btn.confirm" @click="confirmCallback" class="btn btn-primary">
                    {{ btn.confirm }}
                </button>
            </div>
        </template>
    </hpop>
</template>

<style scoped></style>
